<template>
	<div class="launch-wrapper">
		<van-nav-bar title="发起事件单" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="content">
			<v-form-render ref="formRef" :form-json="finallyFormJson" :option-data="optionData" :mixMode="true" v-if="!formLoading" @show-map="showMap">
			</v-form-render>
		</div>
		<div class="bottom-bth">
			<div><van-button type="default" size="small" @click="handleRetrun()">取消</van-button></div>
			<div><van-button type="default" size="small" @click="handleCancle()">重置</van-button></div>
			<div><van-button type="primary" size="small" @click="handleSubmit()">发起事件单</van-button></div>
		</div>
		<!-- 查看弹窗 -->
		<MapDialog ref="mapDialogRef" @select="handleSurePosition" />
	</div>
</template>
<script setup>
import formJson from '/@/utils/dialogTable.json';
import { fetchStart } from '/@/api/myEvent/index';
import { getAllDetailJson } from '/@/utils/transform';
import { useDictAsync } from '@cqdcg/admin/hooks/dict';
import MapDialog from './components/mapDialog.vue';
const route = useRoute();
const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};
const init = async () => {
	showLoadingToast({
		message: '加载中...',
		forbidClick: true,
		duration: 0,
	});
	try {
		await initOptionData();
		await getFinallyFormJson();
		formLoading.value = false;
		closeToast();
	} catch {
		closeToast();
	}
};
//重置表单
const handleCancle = () => {
	formRef.value.resetForm();
	showSuccessToast('重置成功');
};
//取消返回
const handleRetrun = () => {
	router.back();
};

//获取表单信息
const isSubmitting = ref(false);
const handleInfo = async (res) => {
	if (isSubmitting.value) {
		return; // 如果已经在提交中，则不执行任何操作
	}
	const params = JSON.parse(JSON.stringify(res));
	const info = {
		belongGrid: '',
		lon2000: '',
		lat2000: '',
		linkAddress: '',
		dealContent: '',
	};
	isSubmitting.value = true;
	params.belongProvince = params.regionCode ? params.regionCode[0] : '';
	params.belongCity = params.regionCode ? params.regionCode[1] : '';
	params.belongCounty = params.regionCode ? params.regionCode[2] : '';
	params.belongStreet = params.regionCode ? params.regionCode[3] : '';
	params.belongCommunity = params.regionCode ? params.regionCode[4] : '';
	params.lon = params.longLat ? params.longLat?.split(',')[0] : '';
	params.lat = params.longLat ? params.longLat?.split(',')[1] : '';
	params.eventType = route?.query?.eventType || ''; //要求定死工作台code
	params.sourceSystemCode = 'A00000001202412251649570000018677'; //要求定死工作台code
	params.sourceSystemName = '数字工作台'; //要求定死工作台code
	params.peopleInvolved = params.peopleInvolved ? Number(params.peopleInvolved) : 0;
	params.deathToll = params.deathToll ? Number(params.deathToll) : 0;
	params.injured = params.injured ? Number(params.injured) : 0;
	params.economicLoss = params.economicLoss ? Number(params.economicLoss) : 0;
	params.label = params.label ? params.label : '';
	params.sex = params.sex ? params.sex : null;
	params.appeal = params.appeal ? params.appeal : '';
	params.appealTime = params.appealTime ? params.appealTime : null;
	const data = { ...params, ...info };
	const result = await fetchStart(data);
	if (result.ok) {
		showSuccessToast('成功');
		router.push({
			path: '/home',
		});
	} else {
		showFailToast(result.msg || '失败');
	}
};

const handleSubmit = async () => {
	formRef.value
		.getFormData()
		.then(async (res) => {
			await handleInfo(res);
		})
		.catch(() => {
			showFailToast('请填写必填项');
			return;
		});
};
// 获取事件单详情
const formRef = ref();
const formLoading = ref(true);
// 获取完整formjson
const finallyFormJson = ref({});
const getFinallyFormJson = async () => {
	finallyFormJson.value = getAllDetailJson(formJson, false, false);
};
// 初始化选项
const optionData = ref({});
const initOptionData = async () => {
	const { event_level, event_scale, event_sex, event_label, event_appeal_type } = await useDictAsync(
		'event_level',
		'event_scale',
		'event_sex',
		'event_label',
		'event_appeal_type'
	);
	optionData.value = {
		eventLevel: event_level,
		scale: event_scale,
		sex: event_sex,
		label: event_label,
		appeal: event_appeal_type,
	};
};

const mapDialogRef = ref();
// 显示地图
const showMap = () => {
	const position = formRef.value.getFieldValue('longLat');
	mapDialogRef.value.showDialog(position);
};
// 选点
const handleSurePosition = (position) => {
	formRef.value.setFormData({
		longLat: position,
	});
};
onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped>
:deep(.select-popup .pop-box .pop-header) {
	padding: 0 20px !important;
}

.van-button {
	width: 80px;

	&:nth-child(n + 1) {
		margin-right: 20px;
	}
}

.bottom-bth {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: var(--van-tabbar-z-index);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--van-tabbar-height);
	padding-right: 60px;
	padding-left: 60px;
	background: #fff;
	box-shadow: 0 1px 5px 0 #00000029;
}

:deep(.is-guttered) {
	margin-bottom: 15px !important;
}

:deep(.border) {
	background: linear-gradient(180deg, #1989fa 0%, #409eff 100%);
}

.launch-wrapper {
	width: 100%;
	height: 100%;
	background-color: #fff;

	.content {
		height: calc(100% - 46px - 50px);
		overflow: auto;

		.van-tabs {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		:deep(.van-tabs__content) {
			box-sizing: border-box;
			flex: 1;
			overflow-y: auto;
		}
	}
}

:deep(.map-popup) {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 500px;
}
</style>
